<!doctype html>
<!--suppress HtmlFormInputWithoutLabel, HtmlUnknownAttribute, EqualityComparisonWithCoercionJS -->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <title>网页项目一键上传</title>
    <style>
        form {
            max-width: 860px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            width: 80%;
        }
        .layui-input-block b{
            display:inline-block;
            padding:2px 4px;
            border-radius:4px;
            background-color:#ffd8d8;
        }
        .layui-input-block p{
            margin-top: 0.6rem;color: #dc1010;font-size:0.8rem;
        }
    </style>
</head>
<body>
<form method="post" id="upload-form" enctype="multipart/form-data" class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">选择站点</label>
        <div class="layui-input-block">
            <select name="path-id" lay-verify="required">
                <option value="">请选择</option>
                {% for item in websites %}
                <option {% if path_id == item.id %} selected="selected" {% endif %} value="{{ item.id }}">{{ item.name }}---{{ item.path }}</option>
                {% endfor  %}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">压缩文件(.zip)</label>
        <div class="layui-input-block">
            <input id="file_use" lay-verify="zip" type="file" name="zip" lay-skin="switch" onchange="reInput()" accept=".zip">
            <p>在压缩文件中，确保将<b>index.html</b>文件，以及<b>static</b>和<b>assets</b>等文件夹放置是在最外层目录，否则访问时会报403错误。</p>
        </div>
    </div>
    {% if not user and key %}
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="required" type="password" name="password">
            </div>
        </div>
    {% endif %}
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
        </div>
    </div>
</form>


<script src="/static/jquery.3.6.min.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    function reInput() {
        document.querySelector("#file_use").addEventListener("click",
            function (event) {
                $("#file_use").val("");
            })
    }

    //Demo
    layui.use('form', function () {
        let form = layui.form;
        //自定义验证规则
        form.verify({
            zip: function (value) {
                if (value === '' || value === null) {
                    return '请上传压缩包';
                }
            }
        });
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.confirm('确定上传吗？该文件夹下的所有文件将被清空！', {icon: 3}, function () {
                layer.load(1)
                let formData = new FormData($('#upload-form')[0]);
                $.ajax({
                    type: 'post',
                    url: "", //上传文件的请求路径必须是绝对路劲
                    data: formData,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        layer.closeAll('loading'); //关闭加载层
                        if (res.hasOwnProperty('code') && res.hasOwnProperty('msg')) {
                            if (res.code == 1) {
                                layer.msg(res.msg, {icon: 1, time: 800});
                                return false;
                            } else {
                                layer.msg(res.msg, {icon: 2});
                                return false;
                            }
                        }
                        layer.msg('出错了', {icon: 2});
                    },
                    error: function () {
                        layer.msg('上传失败', {icon: 2, time: 800});
                    }
                });
            });
            return false;
        });
        form.render();
    });
</script>
<script></script>
</body>
</html>